<template>
  <div class="dashboard-container">
    <el-card>
      <!-- 顶部 -->
      <!-- <PageTools  /> -->
      <!-- 顶部 -->
      <el-row type="flex" justify="space-between">
        <el-button type="primary" @click="addFn">添加经纪</el-button>
        <el-row type="flex" justify="end">
          <el-input v-model="searchMessage" class="input-top" placeholder="请输入关键字" />
          <el-button icon="el-icon-search" @click="searchFn" />
        </el-row>
      </el-row>
      <hr class="hr">
      <!-- 内容 -->
      <el-table :data="formData" style="width: 100%">
        <el-table-column
          label="图片"
          width="150"
        >
          <template v-slot="{row}">
            <img :src="row.image" alt="" class="img">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          label="电话"
        />
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="desc"
          label="介绍"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template v-slot="{row}">
            <el-button
              size="mini"
              type="primary"
              @click="editFn(row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              @click="delFn(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        @current-change="currentChange"
      />

    </el-card>
    <!-- 添加经纪弹框 -->
    <Addagents ref="refAgents" :is-show.sync="isVisible" @getAgentsList="getAgentsList" />
  </div>
</template>

<script>
// (page-1)每页的数量
import Addagents from './components/add-agents.vue'
import { getAgentsList, delAgents } from '@/api/agents'
import { agentTotal } from '@/api/agents'
export default {
  components: {
    Addagents: Addagents

  },
  data() {
    return {
      searchMessage: '',
      isVisible: false,
      total: 0,
      limit: 2, // 获取的最大条数
      start: 1, // 开始获取的位置
      page: 1,
      formData: [
        {
          image: '', // 图片
          name: '', // 名称
          email: '', // 邮箱
          phone: '', // 电话
          address: '', // 地址
          desc: '' // 介绍
        }
      ]
    }
  },

  async created() {
    // 经纪管理列表

    this.getAgentsList()
    // 总数

    // console.log('res: ', res)
  },
  methods: {
    // 查询
    async searchFn() {
      console.log(this.total)
      this.getAgentsList(
      )
      // console.log('res: ', res)
    },
    // 删除
    async delFn(id) {
      // console.log(id)
      if (this.formData.length === 1 && this.page !== 1) {
        this.page = this.page - 1
      }
      await delAgents(id)
      this.getAgentsList()
    },
    // 编辑
    editFn(id) {
      // console.log(1, id)
      this.isVisible = true
      this.$refs.refAgents.getOneAgents(id)
    },
    // 添加经纪弹出弹框
    async addFn() {
      this.isVisible = true
    },
    // 刷新页面
    async getAgentsList() {
      this.start = (this.page - 1) * this.limit
      const res = await getAgentsList({
        _limit: this.limit,
        _start: this.start,
        name_contains: this.searchMessage
      })
      this.formData = res.data
      console.log(this.searchMessage)
      const result = await agentTotal(
        { name_contains: this.searchMessage || null }
      )
      this.total = result.data
      // console.log('res: ', res)
    },
    currentChange(page) {
      // console.log(page)
      this.page = page
      // (page-1)每页的数量
      this.getAgentsList()
    }

  }
}
</script>

<style lang="scss" scoped>

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.input-top{
  width: 400px;
}
.hr{
  margin-top: 20px,;
  margin-bottom: 10px,;
}
.img{
  width: 100px;
  height: 100px;
}

// (page-1)

</style>
